// createContext函数，用于做跨组件通信的，类似于vue的依赖注入
// context具有响应式的
import React, { Component, createContext } from "react";
import Child from "./Child1";

// 调用以后会返回一个context对象
// 传递数据的Provider和接受数据的Consumer必须来自于同一个context对象
export const CountContext = createContext();
//      提供者     消费者
// export const { Provider, Consumer } = context;

class App extends Component {
  state = {
    count: 100,
  };
  fn = () => {
    this.setState({ count: 200 });
  };
  render() {
    // Provider给传数据的组件套住
    // 必须要有一个value属性，建议value属性写成对象的形式
    return (
      <CountContext.Provider
        value={{
          num: this.state.count,
        }}
      >
        <h2>
          context跨组件通信 - <button onClick={this.fn}>btn</button>
        </h2>
        <Child />
      </CountContext.Provider>
    );
  }
}

export default App;
